Vue Js Image Upload with preview Example:Vue js allows you to upload an image with a preview in just a few simple steps. First, create an input element of type “file” to handle the image selection. Then, add an event listener to capture the selected file. Next, use the FileReader API to read the file and convert it into a data URL. Store this URL in a data property. Finally, bind the src attribute of an image element to the data property to display the preview. By following these steps, you can easily implement an Vue Js Image Upload with preview functionality.
How can I implement Vue Js Image Upload with preview feature?
This code snippet demonstrates how to implement Vue Js Image Upload with preview feature.
When the user selects an image using the file input, the handleFileUpload method is triggered. It retrieves the selected file and creates a FileReader object. The FileReader reads the contents of the file and converts it to a data URL using the readAsDataURL method. The resulting data URL is assigned to the previewImage data property.
The image preview is displayed in the image-preview div using the v-if directive, which only shows the div if previewImage is truthy. Clicking on the preview image triggers the showModal method, which sets the isModalVisible property to true, displaying the modal dialog.
The modal dialog shows the preview image in a larger size. Clicking on the image or the close button triggers the hideModal method, which hides the modal by setting isModalVisible to false.
Vue Js Image Upload with preview Example – HTML Code
<div id="app">
<div class="upload-container">
<label for="file-upload">Choose Image</label>
<input id="file-upload" type="file" @change="handleFileUpload">
<div class="image-preview" v-if="previewImage">
<img :src="previewImage" alt="Preview" @click="showModal">
</div>
</div>
<div class="modal" :class="{ 'show': isModalVisible }" @click.self="hideModal">
<div class="modal-content">
<img :src="previewImage" alt="Preview">
<span class="modal-close" @click="hideModal">×</span>
</div>
</div>
</div>
Output of Vue Js Image Upload with preview Example
Building an Vue Js Image Upload with preview – Javascript Code
This code demonstrates an Vue Js image upload feature with a preview. The data object contains two properties: previewImage and isModalVisible. previewImage initially holds a default image URL, which is displayed as the preview. When the user selects a file using the file input, the handleFileUpload method is triggered. It retrieves the selected file, creates a FileReader, and sets up an onload event handler. The event handler reads the file using readAsDataURL, and once the reading is complete, it updates the previewImage with the base64-encoded result. The showModal and hideModal methods toggle the visibility of a modal.
Vue Js Image Upload with preview Example – Javascript Code
<script type="module" >
const app = Vue.createApp({
data() {
return {
previewImage: 'https://www.sarkarinaukriexams.com/images/editor/1684231361spacex-g93fad4d75_640.jpg',
isModalVisible: false,
};
},
methods: {
handleFileUpload(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = () => {
this.previewImage = reader.result;
};
reader.readAsDataURL(file);
},
showModal() {
this.isModalVisible = true;
},
hideModal() {
this.isModalVisible = false;
},
},
});
app.mount('#app');
</script>
Here is an example of CSS code for implementing Vue Js image upload with preview functionality.
This is an example of CSS code for implementing Vue Js image upload with preview functionality. It includes styles for centering content, headings, file input and upload button container, file input label, preview image container, modal, and modal close button
Vue Js Image Upload with preview Example – CSS Code
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Center the content vertically and horizontally */
#app {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
font-family: Arial, sans-serif;
}
/* Style for the heading */
h3 {
font-size: 24px;
margin-bottom: 20px;
text-align: center;
}
/* Style for the file input and upload button container */
/* Style for the file input and upload button container */
.upload-container {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 20px;
/* Add margin-bottom for spacing */
}
/* Style for the file input */
input[type="file"] {
display: none;
}
/* Style for the file input label */
label {
padding: 10px 20px;
background-color: #4CAF50;
color: #ffffff;
font-size: 16px;
font-weight: bold;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s ease;
}
label:hover {
background-color: #45a049;
}
/* Style for the preview image container */
.image-preview {
text-align: center;
width: 80px;
/* Adjust the width as per your requirement */
height: 80px;
/* Adjust the height as per your requirement */
border-radius: 50%;
/* Make the container circular */
overflow: hidden;
}
/* Style for the preview image */
.image-preview img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
/* Ensure the image fills the container without distortion */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
/* Style for the modal */
.modal {
position: fixed;
z-index: 999;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 0.25s, opacity 0.25s 0s;
}
.modal.show {
visibility: visible;
opacity: 1;
transition-delay: 0s;
}
.modal-content {
background-color: #fefefe;
border-radius: 4px;
padding: 20px;
max-width: 90%;
max-height: 90%;
overflow: auto;
text-align: center;
}
.modal-close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
font-size: 24px;
color: #333;
background: transparent;
border: none;
outline: none;
padding: 0;
margin: 0;
}
.modal-close:hover {
color: #000;
}
